<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
        3d的属性 transform(改变)
                x轴 水平 左右
                y轴 垂直  上下
                Z轴 前面

                偏移 translate  默认是X轴  单位是px 百分比  可以取负值
                     X轴 取值为正往右，取值为负往左
                     Y轴 取值为正往下，取值为负往上
                     Z轴 取值为正往前（放大的错觉），取值为负往后（缩小的错觉）

                     transform: translateX(300px) translateY(300px); 
                     transform: translate(300px,300px); 
                        逗号前面300px代表的是X轴，逗号后面300px代表的是Y轴

                     transform: translate3d(200px,200px,-200px);
                     

                旋转 rotate 默认是Z轴  单位是deg 可以取负值  
                    X轴 上下旋转
                    Y轴 左右旋转
                    默认Z轴是旋转 
                    transform: rotateX(360deg) rotateY(360deg);
                      transform: rotate3d(x轴,y轴,z轴,旋转的角度);
                        0 代表不旋转
                        1 代表旋转
                       
           
                缩放 scale 默认X Y同时  单位 可以取负值（翻转）
                    比1大表示放大
                    比1小表示缩小 
                    X轴就相当于宽度进行放大或者缩小
                    Y轴就相当于高度进行放大或者缩小 
                    transform: scaleX(2) scaleY(.9); 
                    transform: scale(2,.9);
                      逗号前面2代表的是X轴进行放大或者缩小，逗号后面.9代表的是Y轴放大或者缩小

     
                      
         transform-style: preserve-3d; 声明为3d  默认不写为2d flat  
         perspective：景深 怎么查看透视图的   近大远小       
     -->
     <style>
         .main{
             width:300px; height:300px; border: solid 10px #666;
             margin:200px auto 0;
             transform-style: preserve-3d;
             perspective: 1000px;
            
         }
         .box{
             width:300px; height:300px; background: pink;
            transition: all 3s;
         }
         .box:hover{
         
            transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
            transform: rotate3d(1,1,1,45deg);
         }
     </style>
</head>
<body>
    <div class="main">
        <div class="box"></div>
    </div>
</body>
</html>